<template>
  <div class="register-container">
    <a-row justify="center" align="middle" class="full-height">
      <a-col :xs="22" :sm="20" :md="18" :lg="16" :xl="14" :xxl="12">
        <a-card :bordered="false" class="register-card">
          <div class="register-header">
            <img src="/favicon.ico" alt="Logo" class="logo" />
            <h1>宿舍维修报修平台</h1>
            <p>用户注册</p>
          </div>

          <a-form
            ref="formRef"
            :model="registerForm"
            :rules="rules"
            @finish="handleRegister"
            class="register-form"
            layout="vertical"
          >
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="账号" name="accountName" required>
                  <a-input
                    v-model:value="registerForm.accountName"
                    placeholder="请输入账号"
                    :prefix="h(UserOutlined)"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="昵称" name="nickName" required>
                  <a-input
                    v-model:value="registerForm.nickName"
                    placeholder="请输入昵称"
                    :prefix="h(UserOutlined)"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="密码" name="password" required>
                  <a-input-password
                    v-model:value="registerForm.password"
                    placeholder="请输入密码"
                    :prefix="h(LockOutlined)"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="确认密码" name="checkPassword" required>
                  <a-input-password
                    v-model:value="registerForm.checkPassword"
                    placeholder="请再次输入密码"
                    :prefix="h(LockOutlined)"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="邮箱" name="email" required>
                  <a-input
                    v-model:value="registerForm.email"
                    placeholder="请输入邮箱"
                    :prefix="h(MailOutlined)"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="手机号" name="phoneNumber" required>
                  <a-input
                    v-model:value="registerForm.phoneNumber"
                    placeholder="请输入手机号"
                    :prefix="h(PhoneOutlined)"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="用户类型" name="userType" required>
                  <a-select v-model:value="registerForm.userType" placeholder="请选择用户类型">
                    <a-select-option :value="UserType.STUDENT">学生</a-select-option>
                    <a-select-option :value="UserType.REPAIR_WORKER">维修工</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12" v-if="registerForm.userType === UserType.STUDENT">
                <a-form-item label="宿舍地址" name="dormitoryName">
                  <a-input
                    v-model:value="registerForm.dormitoryName"
                    placeholder="请输入宿舍地址"
                    :prefix="h(HomeOutlined)"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-form-item>
              <a-button type="primary" html-type="submit" size="large" block :loading="loading">
                注册
              </a-button>
            </a-form-item>

            <a-form-item>
              <div class="register-footer">
                <span>已有账号？</span>
                <a @click="router.push('/login')">立即登录</a>
              </div>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { register } from '@/api/user'
import { UserType } from '@/types'
import type { UserRegisterRequest } from '@/types'
import type { FormInstance } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
  PhoneOutlined,
  HomeOutlined,
} from '@ant-design/icons-vue'

const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref<boolean>(false)

// 表单数据
const registerForm = reactive<UserRegisterRequest>({
  accountName: '',
  nickName: '',
  password: '',
  checkPassword: '',
  email: '',
  phoneNumber: '',
  userType: UserType.STUDENT,
  dormitoryName: '',
})

// 表单验证规则
const rules: Record<string, Rule[]> = {
  accountName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度为3-20个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '账号只能包含字母、数字和下划线', trigger: 'blur' },
  ],
  nickName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度为2-20个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' },
    { pattern: /^(?=.*[a-zA-Z])(?=.*\d)/, message: '密码必须包含字母和数字', trigger: 'blur' },
  ],
  checkPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (_rule: Rule, value: string): Promise<void> => {
        if (value && value !== registerForm.password) {
          return Promise.reject(new Error('两次输入的密码不一致'))
        }
        return Promise.resolve()
      },
      trigger: 'blur',
    },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
  dormitoryName: [
    { required: true, max: 100, message: '宿舍地址不能超过100个字符', trigger: 'blur' },
  ],
}

// 注册处理
const handleRegister = async (): Promise<void> => {
  try {
    await formRef.value?.validate()
    loading.value = true
    // 暂时不支持注册
    message.warning('注册功能暂未开放，如需注册请联系管理员')
    /* const response = await register(registerForm)
    if (response.code === 0) {
      message.success('注册成功，请联系管理员激活账号')
      router.push('/login')
    } */
  } catch (error: unknown) {
    console.error('注册失败:', error)
    if (error instanceof Error) {
      message.error(error.message)
    } else {
      message.error('注册失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f7fbfc 0%, #d6e6f2 50%, #b9d7ea 100%);
  padding: 20px;
}

.full-height {
  min-height: 100vh;
}

.register-card {
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(118, 159, 205, 0.15);
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  min-height: 700px;
}

.register-header {
  text-align: center;
  padding: 48px 48px 32px;
  background: linear-gradient(135deg, #769fcd 0%, #b9d7ea 100%);
  color: white;
  position: relative;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.register-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(118, 159, 205, 0.9) 0%, rgba(185, 215, 234, 0.8) 100%);
  z-index: 1;
}

.register-header > * {
  position: relative;
  z-index: 2;
}

.logo {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  align-self: center;
}

.register-header h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.register-header p {
  margin: 0;
  opacity: 0.95;
  font-size: 14px;
  font-weight: 400;
}

.register-form {
  padding: 48px 48px 40px;
  min-height: 500px;
}

.register-form :deep(.ant-form-item) {
  margin-bottom: 28px;
}

.register-form :deep(.ant-form-item-label) {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 6px;
}

.register-form :deep(.ant-input-affix-wrapper),
.register-form :deep(.ant-select-selector) {
  border: 2px solid #e8f4f8;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 44px;
  font-size: 14px;
}

.register-form :deep(.ant-input-affix-wrapper:focus),
.register-form :deep(.ant-input-affix-wrapper-focused),
.register-form :deep(.ant-select-focused .ant-select-selector) {
  border-color: #769fcd;
  box-shadow: 0 0 0 2px rgba(118, 159, 205, 0.2);
}

.register-form :deep(.ant-btn-primary) {
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #769fcd 0%, #b9d7ea 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(118, 159, 205, 0.3);
  transition: all 0.3s ease;
  margin-top: 12px;
}

.register-form :deep(.ant-btn-primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(118, 159, 205, 0.4);
}

.register-footer {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-footer a {
  color: #769fcd !important;
  text-decoration: none;
  margin-left: 4px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.register-footer a:hover {
  color: #5a7ba8 !important;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-container {
    padding: 16px;
  }

  .register-card {
    border-radius: 12px;
    margin: 0;
    min-height: 600px;
  }

  .register-header {
    padding: 36px 32px 24px;
    min-height: 120px;
  }

  .register-header h1 {
    font-size: 22px;
  }

  .register-header p {
    font-size: 13px;
  }

  .register-form {
    padding: 36px 32px 32px;
    min-height: 400px;
  }

  .register-form :deep(.ant-form-item) {
    margin-bottom: 20px;
  }

  .register-form :deep(.ant-input-affix-wrapper),
  .register-form :deep(.ant-select-selector) {
    height: 40px;
    font-size: 13px;
  }

  .register-form :deep(.ant-btn-primary) {
    height: 46px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .register-container {
    padding: 12px;
  }

  .register-card {
    min-height: 550px;
  }

  .register-header {
    padding: 28px 24px 20px;
    min-height: 100px;
  }

  .register-header h1 {
    font-size: 20px;
  }

  .register-form {
    padding: 28px 24px 24px;
    min-height: 350px;
  }

  .register-form :deep(.ant-form-item) {
    margin-bottom: 16px;
  }

  .register-form :deep(.ant-input-affix-wrapper),
  .register-form :deep(.ant-select-selector) {
    height: 38px;
    font-size: 13px;
  }

  .register-form :deep(.ant-btn-primary) {
    height: 44px;
    font-size: 14px;
  }
}
</style>
